<extend name='Public/demo' />

<block name='contents'>
    <style>
        #photos-main{
            /*margin:10px auto;*/
            /*width:1000px;*/
        }
        #photos-main ul{
            float:left;
            /*background-color:red;*/
        }
        #photos-main ul li{
            position: relative;
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid #e1e1e1;
            padding:10px;
            transition: all .3s;
            top:0px;
        }
        #photos-main ul li:hover{
            top:-5px;
            box-shadow: 0px 3px 10px #ddd;
        }
        @keyframes flash{
            0%{
                opacity: 0;
                transform: scale(0.9);
            }
            100%{
                opacity: 100;
                transform: scale(1);
            }
        }
        #photos-main ul li .photo-name{
            font-size: 16px;
            padding-bottom: 2px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #photos-main ul li .photo-image img{
            display: block;
            width:100%;
        }

        #photoBox-demo{
            display: none;
        }
        .photo-author-a{
            display: block;
            height: 32px;
            line-height: 32px;
            color:#666;
        }
        .photo-author-a img{
            display: block;
            float:left;
            height: 32px;
            margin-right: 10px;
        }
        .photo-author-a .photo-author{
            font-size: 16px;
            float:left;
        }
        .photo-author-a .photo-time{
            font-size: 14px;
            float:right;
            color:#aaa;
        }



        #returnTop{
            color:white;
            background-color: #67ffc8;
            text-align: center;
            line-height: 50px;
            display: block;
            position: fixed;
            right: 15px;
            bottom: 55px;
            width:50px;
            height:50px;
            font-size: 20px;
            opacity: 0;
            -webkit-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
            border-radius: 50%;
            cursor: default;
            z-index: 100;
        }
        #returnTop:hover{
            -webkit-transform: scale(0.9);
            -ms-transform: scale(0.9);
            -o-transform: scale(0.9);
            transform: scale(0.9);
        }
    </style>
    <div id="returnTop" onclick="returnTop()"><i class='glyphicon glyphicon-chevron-up'></i></div>

    <div class="col-md-12">

    <div class="row">
        <div id="photos-main">
            <li class="photoBox" id="photoBox-demo">
                <p>
                    <a class="photo-author-a" href="" target="_blank">
                        <img src="" />
                        <span class="photo-author"></span>
                        <span class="photo-time"></span>
                    </a>
                </p>
                <a href="" target="_blank" class="photo-image">
                    <img src="" />
                </a>
                <h4 class="photo-name"></h4>
                <p>
                    <a class="btn btn-sm btn-info" target="_blank" href="">
                        <i class="glyphicon glyphicon-search"></i> 查看
                    </a>
                    <a class="btn btn-sm btn-danger btn-zan" photos-id="" href="javascript:void(0);">
                        <i class="glyphicon glyphicon-heart"></i> <span class="photo-zan"></span>
                    </a>
                </p>
            </li>
            <ul class="col-md-3"></ul>
            <ul class="col-md-3"></ul>
            <ul class="col-md-3"></ul>
            <ul class="col-md-3"></ul>
        </div>
    </div>
</div>
    <script type="text/javascript">
        function returnTop(){
            if(document.body.scrollTop+document.documentElement.scrollTop>0){
                window.scrollBy(0, -30);
                setTimeout(returnTop, 1);
            }
        }

        $(function(){
            var p=1;
            var isLoad=false;
            loadItem(p);
            function loadItem(p){
                $.get("{:U('Home/Photo/ajaximg')}",{p:p},function(data){
                    // console.log(data);
                    if(data.length>0){
                        isLoad=true;
                        for (var i = 0; i < data.length; i++) {
                            var photoBox=$('#photoBox-demo').clone(true);
                            photoBox.css('animation','flash '+(i+1)/5+'s');
                            photoBox.find('.photo-image img').attr('src',"__PUBLIC__"+data[i]['photos_path']);
                            photoBox.find('.photo-image').attr('href',"{:U('Home/Image/image')}?id="+data[i]['albums_id']+'&photo_id='+data[i]['photos_id']);
                            photoBox.find('.btn-info').attr('href',"{:U('Home/Image/image')}?id="+data[i]['albums_id']+'&photo_id='+data[i]['photos_id']);
                            photoBox.find('.photo-name').html(data[i]['photos_name']);
                            photoBox.find('.photo-author').html(data[i]['nickname']);
                            photoBox.find('.photo-author-a').attr('href',"{:U('Home/Visitors/index')}?id="+data[i]['user_id']);
                            photoBox.find('.photo-author-a img').attr('src',"__PUBLIC__"+data[i]['photo']);
                            photoBox.find('.photo-time').html(new Date(data[i]['time']*1000).toLocaleDateString());
                            photoBox.find('.photo-zan').html(data[i]['photos_zan']);
                            photoBox.find('.photo-zan').parents('a').attr('photos-id',data[i]['photos_id']);
                            photoBox.show();
                            $('#photos-main ul').eq(i%4).append(photoBox);
                        }
                    }
                },'JSON');
            }

            $(window).scroll(function(){
                if(!isLoad){return;}
                var sT=$(window).scrollTop();
                var sH=$(window).height();
                var dH=$(document).height();
                if(sT+sH+250>=dH){
                    isLoad=false;
                    loadItem(++p);
                }
                // console.log(sT,sH,dH);

                if(document.body.scrollTop+document.documentElement.scrollTop+document.documentElement.clientHeight-100>document.documentElement.clientHeight){
                    document.getElementById('returnTop').style.opacity=1;
                    document.getElementById('returnTop').style.width='50px';
                }else {
                    document.getElementById('returnTop').style.opacity=0;
                    document.getElementById('returnTop').style.width='0px';
                }
            });

            //图片赞
            $('.btn-zan').click(function(){
                var photos_id=$(this).attr('photos-id');
                var num=$(this).find('span').html();
                $(this).find('span').html(num*1+1);
                $.get("{:U('Home/Image/photoszan')}",{id:photos_id},function(){});
            })

        })
    </script>
</block>
